<template>
  <view>
    <view class="flex justify-start w-full py-3">
      <u-image class="flex-shrink-0" :src="data.user?.avatar" width="68" height="68" border-radius="50%" @click="onUserClick" />
      <view class="flex-1 ml-2">
        <view class="flex items-center justify-between w-full">
          <view @click="onUserClick">
            <view class="c-#333 text-32">{{ data.user?.nickname || '' }}</view>
            <view class="c-#999 text-20 mt-1">{{ data.createtime || '' }}</view>
          </view>
          <view class="flex items-center" @click="emit('like')">
            <view class="c-#999 text-24 leading-3">{{ data.like_num || 0 }}</view>
            <image class="w-24 h-21 ml-2" :src="`/static/images/common/ic_${data.is_like ? 'liked' : 'like'}.jpg`" />
          </view>
        </view>
        <view class="flex mt-3">
          <view class="flex-1 text-content">{{ data.comment_content || '' }}</view>
          <view class="flex-shrink-0 flex items-center w-60 h-28 pr-4" @click="emit('complaint')">
            <image class="flex-shrink-0 w-31 h-6" src="/static/images/common/ic_more.jpg" />
          </view>
        </view>
      </view>
    </view>
    <u-line></u-line>
  </view>
</template>
<script setup>
const emit = defineEmits(['complaint', 'like'])
const props = defineProps({
  data: Object,
})

function onUserClick() {
  uni.navigateTo({
    url: `/package_user/pages/mine/index?user_id=${props.data.user_id}`
  })
}
</script>
<style scoped>
.item-style {
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
  padding-bottom: 32rpx;
}

.label-style {
  position: absolute;
  z-index: 1000;
  width: 120rpx;
  height: 40rpx;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  background-color: #f4af22;
  border-radius: 12rpx 0px 12rpx 0rpx;
}

.text-content {
  font-size: 28rpx;
  color: #666;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
